<script setup lang='ts' name="tabs-item">
const props = withDefaults(defineProps<{
    data: any
}>(), {
})
const { data } = props
</script>

<template>
    <el-row class="order_item">
        <el-row class="order-header">
            <el-col :span="6">
                订单编号：{{ data?.orderInformationVO.orderNo }}
            </el-col>

            <el-col :span="6">
                下单时间：{{ data?.orderInformationVO.orderDateTime }}
            </el-col>

            <el-col :span="6">
                {{ data?.orderInformationVO.paymentWay }}
            </el-col>

            <el-col :span="6">
                共{{ data?.productInformationVO.productList.length }}件,合计：{{ data?.productInformationVO.totalPriceProduct }}
            </el-col>
        </el-row>

        <el-row class="order-body">
            <el-col :span="6"
                    flex
            >
                <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                     alt=""
                     class="order-img"
                >

                <div class="desc">
                    <p class="text">
                        ins风沙发
                    </p>

                    <p class="text">
                        单价：400，00 &nbsp; 数量：1
                    </p>
                </div>
            </el-col>

            <el-col :span="6"
                    flex
            >
                <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                     alt=""
                     class="order-img avtaer"
                >

                <div class="desc">
                    <p class="text">
                        {{ data?.consigneeInformationVO.consigneeName }}
                    </p>

                    <p class="text">
                        {{ data?.consigneeInformationVO.consigneeMobile }}
                    </p>
                </div>
            </el-col>

            <el-col :span="2">
                微信商城
            </el-col>

            <el-col :span="2">
                {{ data?.orderStatus }}
            </el-col>

            <el-col :span="2"
                    class="status-sty"
            >
                物流快递
            </el-col>

            <el-col :span="6"
                    class="action_col"
                    flex
                    flex-justify-around
            >
                <span>去发货</span>

                <span>复制订单</span>
            </el-col>
        </el-row>
    </el-row>
</template>

<style lang="scss" scoped>
.order_item {
    display: inline-block;
    width: 100%;

    .order-header {
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: left;
        padding-left: 10px;
        background: #f8f8f8;
    }

    .order-body {
        width: 100%;
        line-height: 60px;
        text-align: center;
        background: #fff;

        .el-col {
            border: 1px solid #ebeef5;
            border-right-color: transparent;
            padding: 15px;

            &:last-child {
                border-right-color: #ebeef5;
            }
        }

        .action_col {
            span {
                color: rgb(22 132 252);
                cursor: pointer;
            }
        }

        .order-img {
            width: 60px;
            height: 60px;
            background: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
                100% 100%;
        }

        .avtaer {
            border-radius: 30px;
        }

        .desc {
            padding-left: 10px;

            .text {
                line-height: 28px;
                text-align: left;

                &:first-child {
                    color: #329dff;
                }
            }
        }

        .status-sty {
            color: #1ad192;
        }
    }
}
</style>
